<template>
  <el-drawer v-model="drawer" :before-close="handleClose" size="70%" modal-class="pay-drawer">
    <template #header>
      <title-view title="发包付款计划" />
    </template>
    <div v-if="payList.length > 0">
      <el-button type="primary" style="width: 116px" @click="handleAdd">付款计划模版</el-button>
      <el-table
        stripe
        :data="payList"
        style="width: 100%; margin-top: 20px"
        :header-cell-style="{ background: '#F2F6FC', color: '#4E5969', 'font-weight': 400, 'font-size': '14px' }"
      >
        <el-table-column prop="nodeName" label="付款节点" />
        <el-table-column prop="address" label="施工节点">
          <template #default="{ row }">
            <el-select v-model="row.taskSettingId" placeholder="请选择">
              <el-option
                v-for="item in taskSettingOption"
                :key="item.taskSettingId"
                :label="item.taskName"
                :value="item.taskSettingId"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="acceptanceItem" label="验收项" />
        <el-table-column prop="originalPlainStartDate" label="预计开工时间" />
        <el-table-column prop="computeRule" label="计算规则">
          <template #default="{ row }">
            {{ row.computeRule === 1 ? "发包总金额*付款比例" : "工种发包总价*付款比例" }}
          </template>
        </el-table-column>
        <el-table-column prop="payRate" label="计划付款比例">
          <template #default="{ row }">
            <el-input-number
              style="width: 100%"
              v-model="row.payRate"
              :min="1"
              :max="100"
              controls-position="right"
              :controls="false"
              :precision="2"
            >
              <template #suffix>
                <span>%</span>
              </template>
            </el-input-number>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="计划付款金额">
          <template #default="{ row }">
            <span v-if="row.computeRule === 1">
              {{ ((factMoney * (row.payRate * 100)) / 10000).toFixed(2) }}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-empty v-else description="暂无内容" style="padding-top: 160px">
      <el-button type="primary" style="width: 180px" @click="handleAdd">付款计划模版</el-button>
    </el-empty>
    <template #footer>
      <div style="display: flex; justify-content: space-between; align-items: center">
        <div>
          发包金额：<span style="color: #ea0000">¥{{ factMoney }}</span>
        </div>
        <div>
          <el-button @click="handleClose" color="#F2F3F5">取消</el-button>
          <el-button type="primary" @click="confirmClick">保存</el-button>
        </div>
      </div>
    </template>
  </el-drawer>
  <!-- 付款计划模板 -->
  <PaymentPlanDialog ref="paymentPlan" @getPaymentPlan="getPaymentPlan" />
</template>
<script setup>
import PaymentPlanDialog from "../paymentPlanDialog/index.vue";
import { ref } from "vue";
import { paymentList, paymentPlanAdd, taskList } from "@/apis/contracting";
import { ElMessage } from "element-plus";

const taskSettingOption = ref([]);
const payList = ref([]);
const paymentPlan = ref();
const contracteesId = ref();
const customerId = ref();
const factMoney = ref();
const emit = defineEmits(["handelSearch"]);
const drawer = ref(false);
// 关闭
const handleClose = () => {
  drawer.value = false;
};
// 提交
const confirmClick = async () => {
  if (payList.value.length > 0) {
    await paymentPlanAdd(payList.value);
    ElMessage.success("添加成功");
    drawer.value = false;
    emit("handelSearch");
  } else {
    ElMessage.error("请选择付款计划模板");
  }
};
// 打开付款计划列表
const openDrawer = async row => {
  factMoney.value = row.factMoney;
  customerId.value = row.customerId;
  contracteesId.value = row.contracteesId;
  await getList();
  drawer.value = true;
};
const getList = async () => {
  const { data } = await paymentList(contracteesId.value);
  payList.value = data || [];
};
const handleAdd = () => {
  paymentPlan.value.openDialog(customerId.value);
};
// 获取选择付款模板
const getPaymentPlan = val => {
  val.contracteesList.map(item => {
    item.contracteesId = contracteesId.value;
    item.templateId = val.templateId;
  });
  payList.value = val.contracteesList;
  getTaskList(val.portraitId);
};
const getTaskList = async id => {
  const { data } = await taskList(id);
  let option = [];
  data.map(item => {
    if (item.templateTaskList) {
      item.templateTaskList.map(items => {
        option.push(items);
      });
    }
  });
  taskSettingOption.value = option;
};
defineExpose({ openDrawer });
</script>
<style scoped lang="scss"></style>
